<template>
	<w-container id='regift' class="page-bg" :loading="loading">
		<w-navbar navType="default" id="my-nav" title="转赠"></w-navbar>
		<view class="pa-16">
			<view class="bg-color-white pa-8 br-12 flex">
				<w-image radius="12" width="83" height="83" :src="product.listimg"></w-image>
				<view class="info-bar flex flex-dir-col flex-js-sb" v-if="userCollection.types!=1">
					<text class="text-overflow-2 font-size-16 font-color-black font-w-500" style="width: 100%;">
						{{product.name}}
					</text>
					<view class="">
						<text class="font-size-10 font-color-minor">编号：#</text>
						<text class="font-size-16 font-color-convention">{{userCollection.collection_code}}</text>
						<text class="font-size-10 font-color-minor">/{{product.total_num}}</text>
					</view>
				</view>
				<view class="info-bar flex flex-ai-center" v-else>
					<text class=" font-size-16 font-color-black font-w-500">
						{{product.name}}
					</text>
				</view>
			</view>

			<view class="font-color-999 font-size-14 mt-12">赠送价格</view>
			<input v-model="form.price" class="mt-12 inputClass" type="text" placeholder="输入赠送价格"
				placeholder-style="color:'#999',fontSize:'32rpx'">
			<view class="font-color-999 font-size-14 mt-12">选择用户</view>
			<w-search-input class="mt-12" placeholder="输入用户手机号或钱包地址" v-model="search.phone" @input='inputChange'
				@confirm='inputChange'></w-search-input>
			<view class="user-bar pa-8 br-12 mt-24 pa-16 flex flex-ai-center" v-if="user.id">
				<u-avatar :src='$ossUrl+user.avatar' size='52'></u-avatar>
				<view class="pl-16 flex flex-1 ptb-4 flex-dir-col flex-js-sb">
					<text class="font-size-14 font-color-textPrimary font-w-500"
						style="max-width: 480rpx;">{{user.nickname}}</text>
					<!-- <text class="font-size-12 text-overflow font-color-textPrimary" style="max-width: 480rpx;">{{user.ntf_url}}</text> -->
				</view>
			</view>

		</view>


		<view class="action plr-12 pt-24">
			<w-button shape="circle" :disabled="!user.id" @click='changeShowConfirm'>确认赠送</w-button>
		</view>


		<u-popup :show='showConfirm' round='12' mode='center'>
			<view class="ptb-26 br-12 auth-popup" style="width: 654rpx;">
				<w-icon size='24' @click='showConfirm=false' class='close' name="close"></w-icon>
				<view class="text-center font-color-black font-size-14">
					确认赠送给用户为：{{user.nickname}}
				</view>

				<view class="pt-24 text-center font-color-black font-size-16 font-w-500">
					请输入操作密码
				</view>
				<view class="font-color-textPrimary mt-8 font-size-12 text-center"
					@click="$u.route('/pages/my/actionPwd/getCode',{action:'reset'})">
					忘记密码？
				</view>
				<view class="flex flex-center mt-30">
					<u-code-input :focus='true' v-model="form.pay_password" dot :maxlength="6" borderColor='transparent'
						@finish='submit'>
					</u-code-input>
				</view>
			</view>
		</u-popup>
	</w-container>
</template>

<script>
	import {
		getUserCollectionDetails,
		givingProduct,
		reGiftOrder
	} from '@/api/collection/index.js'
	import {
		searchUser
	} from '@/api/user/index.js'
	export default {
		data() {
			return {
				userCollectionId: null,
				userCollection: {
					product: {},
					user: {}
				},
				loading: false,
				showConfirm: false,
				search: {
					phone: null
				},
				form: {
					pay_password: '',
					// price:''
				},
				user: {}
			}
		},
		computed: {
			product() {
				return this.userCollection.product
			}
		},
		onLoad(options) {
			this.userCollectionId = options.id;
		},
		onShow() {
			this.getInfo();
		},
		onPullDownRefresh() {
			this.getInfo()
		},
		methods: {
			getInfo() {
				this.loading = 'loading'
				getUserCollectionDetails(this.userCollectionId).then(res => {
					this.userCollection = res.data;
				}).catch(err => {
					setTimeout(() => {
						this.backPage()
					}, 1500)
				}).finally(() => {
					uni.stopPullDownRefresh()
					this.loading = false;
				})
			},
			changeShowConfirm() {
				if(!this.form.price) {
					return uni.showToast({
						title:'请输入价格',
						icon:"none"
					})
				}
				var reg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
				if(!reg.test(this.form.price)) {
					return uni.showToast({
						title:'价格输入不正确',
						icon:"none"
					})
				}
				this.showConfirm = true
			},
			submit() {
				if (!this.user.id) return this.showConfirm = false;
				this.form.re_user_id = this.user.id
				this.form.user_collection_id = this.userCollectionId;
				uni.showLoading({
					title: '赠送中'
				})
				reGiftOrder(this.form).then(res => {
					uni.showToast({
						title: res.msg,
						success() {
							setTimeout(() => {
								// uni.redirectTo({
								// 	url: '/pages/regift/record'
								// })
								// uni.reLaunch({
								// 	url:"/pages/myCollection/myCollection"
								// })
								uni.switchTab({
									url:"/pages/my/my"
								})
							}, 1500)
						}
					})
				}).finally(() => {
					this.form.pay_password = ''
					this.showConfirm = false;
				})
			},
			inputChange(v) {
				this.$u.debounce(this.searchUser, 500)
			},
			searchUser() {
				if (!this.search.phone) {
					this.user = {}
					return;
				}
				searchUser(this.search).then(res => {
					if (!res.data) {
						uni.showToast({
							icon: 'none',
							title: "用户不存在"
						})
					} else {
						this.user = res.data;
					}


				})
			}
		}
	}
</script>

<style lang="scss">
	.inputClass {
		width: 688rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 20rpx 24rpx;
		border: 1rpx solid #EAEAEA;
	}

	#regift {
		.info-bar {
			@extend .ptb-4,
			.pl-16,
			.flex-1;
		}

		.user-bar {
			background: $item-bg-color;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
		}

		.action {
			position: fixed;
			left: 0;
			bottom: 0;
			width: 750rpx;
			padding-bottom: calc(env(safe-area-inset-bottom) + 48rpx);
		}

		.auth-popup {
			position: relative;

			.close {
				position: absolute;
				right: 0;
				top: -80rpx;
				z-index: 2;
			}

			/deep/ .u-code-input {
				gap: 20rpx;
			}

			/deep/ .u-code-input__item {
				background-color: #ECECEC;
				@extend .br-8;
				width: 84rpx !important;
				height: 84rpx !important;
				margin-right: 0 !important;
			}
		}
	}
</style>